<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JSON.parse(localStorage.getItem("user")).username 的个人介绍</title>
    <!--引入vue.js-->
    <script src="js/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!--一定要先引入vue.js再引入index.js因为elementui是基于vue.js实现的,如果不先引入vue.js elementui的js无用-->
    <script src="element-ui/lib/index.js"></script>
    <!--导入axios-->
    <script src="js/axios-0.18.0.js"></script>
    <style>
        body
        {
            background-image: url(img/e.jpg);
            background-size: cover;
        }
        div.transbox
        {
            width: 1050px;
            height: 530px;
            margin: 60px auto;
            background-color: #ffffff;
            border: 1px solid #FFFFFF;
            opacity:0.8;
        }

        h1 {text-align: center;}
        h2.ex1 {margin-left:5cm;}
        h3.ex1 {margin-left:5cm;}
        img.ex1{margin-left:5cm;}
        p{text-align: right;}
        p.ex1{margin-right: 2cm;}
        p{color:mediumpurple}

        /*cc:change color*/
        a.cc:visited {color:#0000ff;}
        a.cc:hover {color:#ffcc00;}
    </style>
</head>
<body>
<div class="background" id="app">
    <div class="transbox" >
        <!--修改信息按钮-->
        <el-button type="primary" plain @click="updateDialogFormVisible=true">修改信息</el-button>
        <h1>个人简介</h1>
        <img src="img/d.jpg" height="60px" width="80px" class="ex1" />
        <h2 class="ex1" id="name">{{studentForm.username}}</h2>
        <h3 class="ex1" id="sno">学号：{{studentForm.sno}}</h3>
        <h3 class="ex1" id="email">邮箱: {{studentForm.email}}</h3>
        <h3 class="ex1" id="className">班级：{{studentForm.className}}</h3>
        <h3 class="ex1">学院：数学与信息科学</h3>
        <h3 class="ex1">学校：<a class="cc" href="http://www.gzhu.edu.cn//">广州大学</a></h3>
        <span> <p class="ex1">这个人很懒，什么都没有留下......</p></span>
    </div>

    <el-dialog title="修改信息" :visible.sync="updateDialogFormVisible">
        <el-form :model="studentForm">
            <el-form-item label="密码" label-width="120px">
                <el-input v-model="studentForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" label-width="120px">
                <el-input v-model="studentForm.email" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updateDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateHandle">确 定</el-button>
        </div>
    </el-dialog>
</div>
<embed height="50" width="100" src="">
</body>
</html>

<script>
    new Vue({
        el: "#app",
        data:{
            updateDialogFormVisible: false,
            studentForm:{
                //name: '谢文健'
            }
        },
        methods:{
            updateHandle(){
                axios.put("/students",{
                    ...this.studentForm
                }).then(res=>{
                    if (res.data.code === 1) {
                        this.selectStuInfo();
                        this.updateDialogFormVisible=false;
                        this.$message.success('修改成功')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                })
            },
            selectStuInfo(){
               let student=JSON.parse(localStorage.getItem("user"));
                axios.get("/students/"+student.sno).then(res=>{
                    if (res.data.code === 1) {
                        this.studentForm=res.data.data;
                        document.title = this.studentForm.username+"的个人介绍"
                        //this.$message.success('回显查询成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                })
            },

        },
        mounted(){
            if(localStorage.getItem("user")==null){
                window.location.href='login.html';
            }
            this.selectStuInfo();
        }
    })
</script>